<template>
  <div class="mode-container">
    <!-- 卡片 -->
    <div class="cardList mb-24" v-if="tabId !== 'second'">
      <div class="cardList-item" v-for="i in cardData">
        <div>
          <span style="font-size: 36px; margin-right: 18px">{{
            i.val || 0
          }}</span
          >次
        </div>
        <div>{{ i.text }}</div>
      </div>
    </div>
    <!-- 图表 -->
    <div class="chart_1 mb-24">
      <div style="margin-bottom: 26px">
        <span class="mr-28">{{
          tabId == 'second'
            ? '报警统计'
            : tabId == 'third'
            ? '故障记录'
            : tabId == 'fourth'
            ? '工单统计'
            : ''
        }}</span>
        <el-date-picker
          v-if="tabId == 'fourth'"
          v-model="chooseDate"
          type="year"
          placeholder="选择年份"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy"
          @change="getChartOrderData"
          style="width: 200px"
        >
        </el-date-picker>
        <el-date-picker
          v-else
          v-model="chooseDate"
          type="year"
          placeholder="选择年份"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy"
          @change="getChartData"
          style="width: 200px"
        >
        </el-date-picker>
      </div>
      <div class="chart-box-1">
        <ChartTemplate :chart-option="alarmStatisticsOption(chartData, str)" />
      </div>
    </div>
    <!-- 表格检索区域 -->
    <div class="filter-field mb-24" v-if="tabId == 'second'">
      <el-col :span="4">
        <div class="mr-55 f-c w-150">
          <div class="w-100 f-c-c">告警原因：</div>
          <el-select v-model="queryParams.alarmCause" placeholder="请选择">
            <el-option
              v-for="item in alarmCauseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="5">
        <div class="mr-55 f-c">
          <div class="w-100 f-c-c">处理状态：</div>

          <el-select v-model="queryParams.solveStatus" placeholder="请选择">
            <el-option
              v-for="item in solveStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="5"
        ><div class="mr-55 f-c">
          <div class="w-100 f-c-c">工单状态：</div>

          <el-select v-model="queryParams.jobStatus" placeholder="请选择">
            <el-option
              v-for="item in jobStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select></div
      ></el-col>
      <el-col :span="6">
        <div class="mr-55 f-c">
          <div class="w-100 f-c-c">日期范围：</div>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
          >
          </el-date-picker></div
      ></el-col>
      <el-col :span="4">
        <div>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="queryAlarmList"
            style="margin-right: 10px"
            size="small"
            >搜索</el-button
          >
          <el-button type="info" @click="toReset" style="margin-right: 10px">
            <i class="el-icon-delete" />
            重置
          </el-button>
        </div></el-col
      >
    </div>
    <div class="filter-field mb-24" v-if="tabId == 'third'">
      <div class="mr-55 f-c">
        <div class="w-100 f-c-c">处理状态：</div>
        <el-select v-model="queryParams.solveStatus" placeholder="请选择">
          <el-option
            v-for="item in solveStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="mr-55 f-c">
        <div class="w-100 f-c-c">日期范围：</div>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="queryFaultList"
          style="margin-right: 10px"
          >搜索</el-button
        >
        <el-button type="info" @click="toReset" style="margin-right: 10px">
          <i class="el-icon-delete" />
          重置
        </el-button>
      </div>
    </div>
    <div class="filter-field mb-24" v-if="tabId == 'fourth'">
      <div class="mr-55 f-c">
        <div class="w-100 f-c-c">告警类型：</div>
        <el-select v-model="queryParams.deviceStatus" placeholder="请选择">
          <el-option
            v-for="item in alarmTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="mr-55 f-c">
        <div class="w-100 f-c-c">处理状态：</div>
        <el-select v-model="queryParams.solveStatus" placeholder="请选择">
          <el-option
            v-for="item in solveStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="mr-55 f-c">
        <div class="w-100 f-c-c">日期范围：</div>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="queryOrderList"
          style="margin-right: 10px"
          >搜索</el-button
        >
        <el-button type="info" @click="toReset" style="margin-right: 10px">
          <i class="el-icon-delete" />
          重置
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      :border="false"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="i in tableTitle"
        :prop="i.field"
        :label="i.name"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="i.TransformType == 'option'">
            {{ i.optionList[scope.row[i.field]] }}
          </span>
          <span v-if="i.TransformType == 'time'">
            {{ scope.row[i.field] | parseTime(scope.row[i.field]) }}
          </span>
          <span v-if="i.TransformType == 'none'">
            {{ scope.row[i.field] }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="action"
        label="操作"
        align="center"
        v-if="tabId == 'second'"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="action"
        label="操作"
        align="center"
        v-if="tabId == 'fourth'"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toOrderDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            type="text"
            @click="toHandleOrder(scope.row)"
            v-if="scope.row.status == 1"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="f-r-end">
      <el-pagination
        style="float: right; margin: 20px 20px 0 0; width: 400px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="currentSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

    <!-- 告警弹框 -->
    <detail
      v-if="detailDialogObj.isVisible"
      ref="detailDialog"
      :dialog-visible="detailDialogObj.isVisible"
      :title="detailDialogObj.title"
      :params="params1"
      @close="detailDialogObj.isVisible = false"
    />
    <!-- 工单详情 -->
    <orderDetail
      v-if="orderDetailDialogObj.isVisible"
      ref="orderDetailDialog"
      :dialog-visible="orderDetailDialogObj.isVisible"
      :title="orderDetailDialogObj.title"
      :params="params2"
      @close="orderDetailDialogObj.isVisible = false"
    />
    <!-- 处理 -->
    <handle
      v-if="handleDialogObj.isVisible"
      ref="orderAdd"
      :params="params3"
      :title="handleDialogObj.title"
      :dialog-visible="handleDialogObj.isVisible"
      @close="handleDialogObj.isVisible = false"
    />
  </div>
</template>

<script>
import ChartTemplate from '@/components/Chart/ChartTemplate' //导入图表模板
import { parseTime } from '@/utils'
import dataMonitorApi from '@/api/data-monitor'
import dashboardManageApi from '@/api/dashboard-manage'
import { alarmStatisticsOption } from './chartOption'
import orderManageApi from '@/api/order-manage'
import Detail from '@/views/febs/warning/record/components/detail'
import orderDetail from '@/views/febs/order/components/detail'
import Handle from '@/views/febs/order/components/handle'
export default {
  components: {
    ChartTemplate,
    Detail,
    orderDetail,
    Handle,
  },
  name: 'associatedWorkOrder',
  props: {
    tabId: {
      type: String,
      default: null,
    },
    deviceCode: {
      type: String,
      default: null,
    },
    str: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      chooseDate: new Date(),
      alarmStatisticsOption: alarmStatisticsOption,
      //   列表查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceSource: this.deviceCode,
        // deviceSource: "1111111111180100130072"
        // deviceStatus: 2,
        // solveStatus: 0,
        // jobStatus: 1,
        // alertTimeFrom: "2023-02-01 00:00:00",
        // alertTimeTo: "2023-03-01 00:00:00"
      },
      //   处理状态
      solveStatusList: [
        { label: '待处理', value: 0 },
        { label: '已处理', value: 1 },
      ],
      //   告警类型
      alarmTypeList: [
        { label: '故障', value: 1 },
        { label: '报警', value: 2 },
        { label: '反馈', value: 3 },
        { label: '启动', value: 4 },
      ],

      // 告警原因
      alarmCauseList: [
        { label: '剩余电流报警', value: '剩余电流报警' },
        { label: '温度上限报警', value: '温度上限报警' },
        { label: '温度断路', value: '温度断路' },
        { label: '过流报警', value: '过流报警' },
        { label: '过压报警', value: '过压报警' },
        { label: '欠压报警', value: '欠压报警' },
        { label: '功率报警', value: '功率报警' },
        { label: '故障电弧报警', value: '故障电弧报警' },
        { label: '电瓶车接入', value: '电瓶车接入' },
        { label: '电瓶车拔出', value: '电瓶车拔出' },
      ],
      //   工单状态
      jobStatusList: [
        { label: '未派单', value: 0 },
        { label: '待处理', value: 1 },
        { label: '已处理', value: 2 },
        // { label: '审核通过', value: 3 },
        // { label: '审核不通过', value: 4 },
      ],
      tableData: [],
      tableTitle: [],
      cardData: [],
      value1: '',
      value2: '',
      chartData: {},
      dateRange: [],
      loading: false,
      detailDialogObj: {
        isVisible: false,
        title: '',
      },
      orderDetailDialogObj: {
        isVisible: false,
        title: '',
      },
      handleDialogObj: {
        isVisible: false,
        title: '',
      },
      currentPage: 1,
      currentSize: 10,
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    // 按月统计报警/故障接口
    getChartData() {
      let param = {
        createTime: parseTime(this.chooseDate),
        deviceSource: this.deviceCode,
        deviceStatus:
          this.tabId == 'third' ? 1 : this.tabId == 'second' ? 2 : '',
      }

      dataMonitorApi
        .countAlertByMonthData(param)
        .then((res) => {
          //   console.log("res.totalFault", res);
          this.chartData = res.data
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
        })
    },
    // 按月统计工单接口
    getChartOrderData() {
      let param = {
        createTime: parseTime(this.chooseDate),
        deviceSource: this.deviceCode,
      }

      dataMonitorApi
        .countJobByMonthData(param)
        .then((res) => {
          //   console.log("res.totalFault", res);
          this.chartData = res.data
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
        })
    },
    getInfo() {
      switch (this.tabId) {
        case 'second':
          this.getInfo_2()
          this.getChartData()
          break
        case 'third':
          this.getInfo_3()
          this.queryFaultList()
          break
        case 'fourth':
          this.getInfo_4()
          this.getChartOrderData()
          this.queryOrderList()
          break

        default:
          break
      }
    },
    searchTableData() {
      switch (this.tabId) {
        case 'second':
          this.getInfo_2()
          break
        case 'third':
          this.queryFaultList()
          break
        case 'fourth':
          this.queryOrderList()
          break

        default:
          break
      }
    },
    // 告警记录
    getInfo_2() {
      this.queryAlarmList()
    },
    // 故障记录
    getInfo_3() {
      let param = {
        deviceSource: this.deviceCode, //设备编号
        deviceStatus: 1, //设备状态：1故障
      }
      // 统计设备故障数据
      dataMonitorApi
        .countAlertData(param)
        .then((res) => {
          // console.log("res.totalFault", res);
          this.cardData = [
            {
              text: '故障总次数',
              val: res.data.totalFault,
            },
            {
              text: '当日故障次数',
              val: res.data.todayFault,
            },
            {
              text: '已处理故障',
              val: res.data.dealFault,
            },
            {
              text: '未处理故障',
              val: res.data.notDealFault,
            },
          ]
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
        })

      this.getChartData()
    },
    // 关联工单
    getInfo_4() {
      let param = {
        deviceSource: this.deviceCode,
      }
      // 统计设备故障数据
      dataMonitorApi
        .countJobData(param)
        .then((res) => {
          // console.log("res.totalFault", res);
          this.cardData = [
            {
              text: '年总工单数',
              val: res.data.totalJob,
            },
            {
              text: '今日工单数',
              val: res.data.todayJob,
            },
            {
              text: '待处理工单数',
              val: res.data.notDealJob,
            },
            {
              text: '已处理工单数',
              val: res.data.dealJob,
            },
          ]
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
        })

      //   this.getChartData();
    },
    // 告警列表
    queryAlarmList() {
      this.loading = true
      if (this.dateRange.length > 0) {
        this.queryParams.alertTimeFrom = this.dateRange[0]
        this.queryParams.alertTimeTo = this.dateRange[1]
      }
      dashboardManageApi
        .getEquipmentCollectAlert(this.queryParams)
        .then((res) => {
          //   console.log("res", res);
          this.tableData = res.data.data.rows

          this.tableTitle = [
            // {
            //   name: '告警类型',
            //   field: 'deviceStatus',
            //   TransformType: 'option',
            //   optionList: {
            //     1: '故障',
            //     2: '报警',
            //     3: '反馈',
            //     4: '启动',
            //   },
            // },
            {
              name: '告警原因',
              field: 'alarmCause',
              TransformType: 'none',
              
            },
            {
              name: '处理状态',
              field: 'solveStatus',
              TransformType: 'option',
              optionList: {
                0: '待处理',
                1: '已处理',
              },
            },
            {
              name: '告警时间',
              field: 'alertTime',
              TransformType: 'time',
            },
            {
              name: '工单状态',
              field: 'jobStatus',
              TransformType: 'option',
              optionList: {
                0: '未派单',
                1: '待处理',
                2: '已处理',
              },
            },
          ]
          this.loading = false
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
          this.loading = false
        })
    },
    // 故障列表
    queryFaultList() {
      this.loading = true
      if (this.dateRange.length > 0) {
        this.queryParams.alertTimeFrom = this.dateRange[0]
        this.queryParams.alertTimeTo = this.dateRange[1]
      }
      this.queryParams.deviceStatus = 1
      dashboardManageApi
        .getEquipmentCollectAlert(this.queryParams)
        .then((res) => {
          //   console.log("res", res);
          this.tableData = res.data.data.rows

          this.tableTitle = [
            {
              name: '故障时间',
              field: 'alertTime',
              TransformType: 'time',
            },
            {
              name: '处理状态',
              field: 'solveStatus',
              TransformType: 'option',
              optionList: {
                0: '待处理',
                1: '已处理',
              },
            },
            {
              name: '处理时间',
              field: 'confirmTime',
              TransformType: 'time',
            },
            {
              name: '处理人',
              field: 'confirmUser',
              TransformType: 'none',
            },
          ]
          this.loading = false
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
          this.loading = false
        })
    },
    // 工单列表
    queryOrderList() {
      this.loading = true
      if (this.dateRange.length > 0) {
        this.queryParams.alertTimeFrom = this.dateRange[0]
        this.queryParams.alertTimeTo = this.dateRange[1]
      }
      orderManageApi
        .getOrderList(this.queryParams)
        .then((res) => {
          //   console.log("res", res);
          this.tableData = res.data.data.rows

          this.tableTitle = [
            {
              name: '工单编号',
              field: 'alramCode',
              TransformType: 'none',
            },
            {
              name: '告警类型',
              field: 'deviceStatus',
              TransformType: 'option',
              optionList: {
                1: '故障',
                2: '报警',
                3: '反馈',
                4: '启动',
              },
            },
            {
              name: '创建时间',
              field: 'createdTime',
              TransformType: 'time',
            },
            {
              name: '工单状态',
              field: 'status',
              TransformType: 'option',
              optionList: {
                1: '待处理',
                2: '已处理',
              },
            },
          ]
          this.loading = false
        })
        .catch(() => {
          this.$message.error(`请求失败，请联系管理员`)
          this.loading = false
        })
    },
    // 重置
    toReset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        deviceSource: this.deviceCode,
      }
      this.dateRange = []
      this.currentPage = 1
      this.currentSize = 10
      this.searchTableData()
    },
    // 跳转告警详情
    toDetail(data) {
      this.params1 = {
        ...data,
      }
      this.detailDialogObj.title = '告警记录 ＞详情'
      this.detailDialogObj.isVisible = true
    },
    // 跳转工单详情
    toOrderDetail(data) {
      this.params2 = {
        ...data,
      }
      this.orderDetailDialogObj.title = '工单列表 ＞详情'
      this.orderDetailDialogObj.isVisible = true
    },
    // 处理工单
    toHandleOrder(data) {
      this.params3 = {
        ...data,
      }
      this.handleDialogObj.title = '工单列表 ＞工单处理'

      this.handleDialogObj.isVisible = true
      this.$nextTick(() => {
        this.$refs.orderAdd.getDictValueAttr()
      })
    },
    // 分页跳转
    handleCurrentChange(e) {
      this.currentPage = e
      this.queryParams.pageNum = e
      this.searchTableData()
    },
    // size变化
    handleSizeChange(e) {
      this.currentSize = e
      this.queryParams.pageSize = e
      this.searchTableData()
    },
  },
}
</script>

<style scoped>
.mode-container {
  display: flex;
  flex-direction: column;
  height: fit-content;
  background-color: #fff;
  padding: 24px 0;
  overflow-y: auto;
}

.cardList {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.cardList-item {
  height: 13.1vh;
  width: 24%;
  padding: 1.2vw 3.7vh;
  border: 1px solid #e6e8eb;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.chart_1 {
  border: 1px solid #e6e8eb;
  padding: 11px 21px;
}
.chart-box-1 {
  height: 30vh;
  width: 100%;
}

.filter-field {
  height: 6.6vh;
  border: 1px solid #e6e8eb;
  display: flex;
  align-items: center;
  padding: 0 19px;
}
.mr-55 {
  margin-right: 36px;
}
.mr-28 {
  margin-right: 1vw;
}
.mb-24 {
  margin-bottom: 2.2vh;
}

.filter-item {
  display: flex;
}
.w-100 {
  /* width: fit-content; */
  width: 5.2vw;
}
.w-150 {
  /* width: fit-content; */
  width: 13vw;
}
.w-80 {
  /* width: fit-content; */
  width: 5.2vw;
}
.f-c-c {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.f-c {
  display: flex;
}
.f-r-end {
  display: flex;
  flex-direction: row;
  justify-content: end;
}
</style>
